<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<title>CSS 选择器演示-css选择器-haorooms博客css选择器演示</title>
<meta name="keywords" content="Web标准,css选择器,css选择符,css selectors,css">
<meta name="description" content="本css选择器可以通过本页面直观的理解 CSS 选择器的作用区域。">
<style>
html,body,h1,h2,h3,p,fieldset,legend,ul,ol,li,dl,dt,dd{margin:0;padding:0;}
ul,ol,dl{list-style:none;}
body{padding:20px 0;color:#333;font-size:12px;line-height:1.7;background:#333;}

.clearfix{zoom:1;}
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}

.wrap{position:relative;width:900px;margin:0 auto;padding:20px 50px;border-radius:5px;background:#fff;}
</style>
<style id="code_ciaoca_donate_tyle">#code_ciaoca_donate{overflow:hidden;position:fixed;bottom:30px;right:0;zoom:1;width:190px;height:270px;border:1px solid #444;border-right:none;border-radius:5px 0 0 5px;color:#eee;-webkit-transition:right 0.3s,height 0.5s 0.3s;-moz-transition:right 0.3s,height 0.5s 0.3s;transition:right 0.3s,height 0.5s 0.3s;filter:progid:DXImageTransform.Microsoft.gradient(enabled="true",startColorstr="#CC000000",endColorstr="#CC000000");background-color:rgba(0,0,0,0.8);}#code_ciaoca_donate .full{float:left;width:160px;margin:0;padding:10px 15px;font:12px/20px Arial;}#code_ciaoca_donate .full h5{margin:0;padding:0;font:bold 14px/20px Arial;}#code_ciaoca_donate .full .qr{color:#c3c3c3;}#code_ciaoca_donate .full .qr i{display:block;width:160px;height:160px;margin:5px 0;background:url(http://code.ciaoca.com/img/donate_alipay_qrcode.png) no-repeat;}#code_ciaoca_donate .full .close{position:absolute;top:12px;right:5px;width:16px;height:16px;color:#e33;font:bold 14px/16px Tahoma;cursor:pointer;}#code_ciaoca_donate .mini{display:none;float:left;width:20px;height:80px;padding:10px 5px;font:12px/18px Tahoma;text-align:center;cursor:pointer;}#code_ciaoca_donate.minimize{width:220px;right:-190px;height:110px;background-color:rgba(0,0,0,0.6);}#code_ciaoca_donate.minimize:hover{background-color:rgba(0,0,0,0.8);}#code_ciaoca_donate.minimize .mini{display:block;}@media screen and (max-width:640px){#code_ciaoca_donate,#code_ciaoca_donate.minimize{position:relative;bottom:auto;right:auto;width:auto;height:auto;margin:20px;border-radius:5px;background-color:rgba(0,0,0,0.8);}#code_ciaoca_donate .mini,#code_ciaoca_donate.minimize .mini,#code_ciaoca_donate .full .close{display:none;}#code_ciaoca_donate .full{float:none;width:auto;}}</style></head>
<body>
<div class="wrap clearfix">
	<div id="example" class="ex_not">
		<h1>盗墓笔记</h1>
		<h2>目录</h2>
		<div id="catalogue">
			<h3>七星鲁王</h3>
			<ol id="asd" class="list">
				<li>第一章 血尸</li>
				<li>第二章 五十年后</li>
				<li>第三章 瓜子庙</li>
			</ol>
			<h3>怒海潜沙</h3>
			<ol class="list" lang="zh">
				<li>第一章 蛇眉铜鱼</li>
				<li>第二章 双层墓墙</li>
				<li>第三章 大风暴</li>
			</ol>
			<h3>云顶天宫</h3>
			<ol class="only">
				<li>第一章 五圣雪山</li>
			</ol>
			<dl class="list">
				<dt>蛇沼鬼城</dt>
				<dd>第一章 三叔的醒来</dd>
				<dd>第二章 往事不堪回首</dd>
			</dl>
			<dl class="list">
				<dt>谜海归巢</dt>
			</dl>
			<div class="season_2">
				<h3>阴山古楼</h3>
				<h3>邛笼石影</h3>
				<h3>大结局</h3>
				<h3>h3</h3>
			</div>
		</div>
		
		<h2>试读</h2>
		<h3>七星鲁王 第一章 血尸</h3>
		<div class="article">
			<p lang="zh">50年前，<a class="n" target="_blank" href="http://www.haorooms.com/">长沙</a>镖子岭。</p>
		</div>
		<div class="article">
			<p>四个<a class="abc-" target="_blank" href="http://www.haorooms.com/">土夫子</a>正蹲在一个土丘上，所有人都不说话，直勾勾地盯着地上那把<a class="n abc" target="_blank" href="http://www.haorooms.com/">洛阳铲</a>。</p>
			<p><a class="n abc o" target="_blank" href="http://www.haorooms.com/">铲子</a>头上带着刚从地下带出的旧土，离奇的是，这一坏土正不停地向外渗着鲜红的液体，就像刚刚在<a target="_blank" href="http://www.haorooms.com/">血液</a>里蘸过一样。</p>
		</div>
		<div class="article">
			<p>“这下子麻烦大喽。”老烟头把他的旱烟在地上敲了敲，接着道，“下面是个<a class="abc-q" target="_blank" href="http://www.haorooms.com/">血尸</a>嘎，弄不好我们这点儿当当，都要撂在下面噢。”</p>
			<p class="talk">“下不下去喃？要得要不得，一句话，莫七里八里的！”独眼的小伙子说，“你说你个老人家腿脚不方便，就莫下去了，我和我弟两个下去，管他什么东西，直接给他来一梭子。”</p>
			<p class="talk">老烟头不怒反笑，对边上的一个大胡子说：“你屋里二伢子海式撩天的，指不定什么时候就给翻盖子了，你得多教育教育，咱这买卖，不是有只匣子炮就能喔荷西天。”</p>
			<p class="talk">那大胡子瞪了那年轻人一眼：“你崽子，怎么这么跟老太爷讲话，老太爷淘土的时候你他妈的还在你娘肚子里吃屎咧。”</p>
			<p class="talk">“我咋说……说错了，老祖宗不说了嘛，那血尸就是个好东西，下面宝贝肯定不少，不下去，走嘎一炉锅汤。”</p>
			<p class="talk">“你还敢顶嘴！”大胡子举手就打，被老烟头用烟枪挡了回去。</p>
			<p class="talk">“打不得，你做伢那时候不还是一样，这叫<a class="abc-m-f" target="_blank" href="http://www.haorooms.com/">上梁不正下梁歪</a>！”</p>
			<p class="talk">那独眼的小伙子看他老爸被数落了，低下头偷笑，老烟头咳嗽了一声，又敲了那独眼的少年一记头棍：“你笑个啥？碰到血尸，可大可小，上次你二公就是在洛阳挖到这东西，结果现在还疯疯癫癫的，都不知道着了什么道。等一下我先下去，你跟在我后面，二伢子你带个土耗子殿后，三伢子你就别下去了，四个人都下去，想退都来不及退，你就拉着土耗子的尾巴，我们在里面一吆喝你就把东西拉出来。”</p>
		</div>
	</div>
</div>


<script src="./resource/jquery-1.4.4.min.js"></script>
<script>

</script>
<style>
    /* #catalogue h3{ //#catalogue下的所有h3
        background-color: #666;
    } */
    /* #catalogue>h3{//#catalogue下的子级的h3
        background-color: #666;
    } */
    
    /* h1+h2{ //h1后面紧跟的h2
        background-color: #666;
    } */
    /* h1~h2{ //h1后面所有的h2
        background-color: #666;
    } */
    /* h3:first-child{ 匹配同辈的所有元素中，第一个元素并且是 h3 的元素
        background-color: #666;
    } */
    /* h3:last-child{ 匹配同辈的所有元素中，最后一个元素并且是 h3 的元素
        background-color: #666;
    } */
    /* h3:first-of-type{ 匹配同辈的 h3 元素中，第一个 h3 元素。
        background-color: #666;
    } */
    /* h3:last-of-type{ 匹配同辈的 h3 元素中，最后一个 h3 元素。
        background-color: #666;
    } */
    /* h3:nth-child(2n){ 匹配同辈的所有元素中，第 2n 个元素并且是 h3 的元素  这里的2n  n是从1开始的
        background-color: #666;
    }
    h3:nth-child(2n+1){ 这里的2n n是从0开始的
        background-color: #666;
    } */
    /* h3:nth-last-child(2n){ 匹配同辈的所有元素中，倒数第 2n 个元素并且是 h3 的元素。
        background-color: #666;
    } */
    /* h3:nth-of-type(2n){ 匹配同辈的 h3 元素中，第 2n 个 h3 元素
        background-color: #666;
    } */

具体可以参考https://www.haorooms.com/tools/css_selecter/


</style>


</body></html>